<!--
 * @Description: 大前端学习
 * @Version: H5
 * @Author: Ajax
 * @Date: 2020-04-22 20:24:12
 * @LastEditors: Ajax
 * @LastEditTime: 2020-05-17 21:30:53
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>DOC</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .box {
            margin: 100px auto 0;
            position: relative;
            height: 340px;
            width: 632px;
            overflow: hidden;
        }

        .photos-con {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            height: 340px;
            width: 3852px;
        }

        .photos-con li {
            flex-shrink: 0;
            height: 100%;
            width: 632px;
        }

        .photos-con li img {
            display: block;
            height: 100%;
            width: 100%;
        }

        span {
            position: absolute;
            top: 50%;
            opacity: 0.3;
            color: #fff;
            cursor: pointer;
            padding: 0 20px;
            transition: opacity .3s, background-color .3s;
            transform: translateY(-50%);
        }

        .box:hover span {
            opacity: .7;
        }

        span:hover {
            background-color: #00000050;
        }

        .prew {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        .btns {
            position: absolute;
            display: flex;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .btns li {
            width: 15px;
            height: 15px;
            margin: 0 5px;
            border-radius: 50%;
            cursor: pointer;
            transition: all .3s;
            border: 2px solid transparent;
            background-color: #fff;
        }

        .btns li:hover {
            transform: scale(1.3);
            border-color: #fff;
            background-color: #007acc;
        }

        .btns li.current {
            transition: all .3s;
            border: 0 !important;
            transform: scale(1.5);
            background: transparent url(images/icon.png) no-repeat top center/cover;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="photos-con">
            <li><a href="javascript:;"><img src="images/img-1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-5.jpg" alt=""></a></li>
        </ul>
        <span class="next"><i class="fa fa-angle-right fa-4x" aria-hidden="true"></i></span>
        <span class="prew"><i class="fa fa-angle-left fa-4x" aria-hidden="true"></i></span>
        <ul class="btns">
        </ul>
    </div>
    <script src="js/$-select-jq.js"></script>
    <script src="js/animate.js"></script>
    <script src="js/autoplay.js"></script>
</body>

</html>